<template>
  <el-container class="register-container">
    <el-header>
      <el-steps :active="activeStep" finish-status="success">
        <el-step title="邮箱验证"/>
        <el-step title="用户名和密码"/>
      </el-steps>
    </el-header>
    <el-main class="register-container-main">
      <component
        :is="stepComps[activeStep]"
        v-bind="registerInfo"
        @changeInfo="changeInfo"
        @stepForward="stepForward"
        @stepBack="stepBack"
      />
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: 'RegisterPage',
  data() {
    return {
      activeStep: 0,
      stepComps: ['registerEmail', 'registerCredential'],
      registerInfo: {}
    };
  },
  methods: {
    changeInfo(info) {
      for (const key in info) {
        if (info[key]) {
          this.$set(this.registerInfo, key, info[key]);
        } else {
          this.$delete(this.registerInfo, key);
        }
      }
    },
    stepForward() {
      if (this.activeStep < this.stepComps.length - 1) {
        this.activeStep++;
      }
    },
    stepBack() {
      if (this.activeStep > 0) {
        this.activeStep--;
      }
    }
  }
};
</script>

<style scoped lang="scss">
.register-container {
  max-width: 500px;
  min-width: 300px;

  &-main > .el-container {
    flex-direction: column;
  }
}
</style>
